<template>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="add-admin-form"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" :disabled="isEdit" />
      </el-form-item>

      <el-form-item label="VIP">
            <el-select v-model="form.vip_id" placeholder="请选择VIP" clearable>
                <el-option label="请选择VIP" :value="null" disabled />
                <el-option v-for="item in vipList" :label="item.name ??'无'" :value="item.id" />
            </el-select>
        </el-form-item>
  
      <el-form-item label="密码" prop="password" v-if="!isEdit">
        <el-input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
  
      <el-form-item label="确认密码" prop="confirmPassword" v-if="!isEdit">
        <el-input
          v-model="form.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
          show-password
        />
      </el-form-item>
  
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="请输入昵称" />
      </el-form-item>
  
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref, reactive, watch } from 'vue';
  import { ElMessage } from 'element-plus';
  
  const props = defineProps({
    formData: {
      type: Object,
      default: () => null
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    vipList: {
      type: Object, // 文章分类列表
      default: () => {} // 默认值为空对象
    }
  });
  
  const formRef = ref(null);
  
  const form = reactive({
    username: '',
    password: '',
    confirmPassword: '',
    nickname: '',
    phone: '',
    status: 1
  });
  
  // 监听formData变化，更新表单数据
  watch(() => props.formData, (newVal) => {
    if (newVal) {
      Object.assign(form, newVal);
    }
  }, { immediate: true });
  
  // 重置表单
  const resetForm = () => {
    if (formRef.value) {
      formRef.value.resetFields();
    }
    Object.assign(form, {
      username: '',
      password: '',
      confirmPassword: '',
      nickname: '',
      phone: '',
      status: 1,
      vip_id:0
    });
  };
  
  // 验证规则
  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 2, max: 20, message: '用户名长度在2到20个字符之间', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      { 
        validator: (rule, value, callback) => {
          if (value !== form.password) {
            callback(new Error('两次输入的密码不一致'));
          } else {
            callback();
          }
        },
        trigger: 'blur'
      }
    ],
    nickname: [
      { required: true, message: '请输入昵称', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { 
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入正确的手机号',
        trigger: 'blur'
      }
    ],
    status: [
      { required: true, message: '请选择状态', trigger: 'change' }
    ]
  };
  
  const validateForm = async () => {
    try {
      await formRef.value.validate();
      return true;
    } catch (error) {
      ElMessage.error('请检查表单填写是否正确');
      return false;
    }
  };
  
  
  defineExpose({
    formRef,
    form,
    validateForm,
    resetForm
  });
  </script>
  
  <style scoped>
  .add-admin-form {
    padding: 20px;
  }
  </style> 